<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>猜单词游戏</title>
		<link rel="stylesheet" href="style.css">
	</head>
	<body>
		<h1>自挂东南枝</h1>
		<p>找到隐藏的单词-输入字母</p>
		<div class="game-container">
			<svg height="250" width="200" class="figure-container">
				<!--枝头-->
				<line x1="60" y1="20" x2="140" y2="20"/>
				<line x1="140" y1="20" x2="140" y2="50"/>
				<line x1="60" y1="20" x2="60" y2="230"/>
				<line x1="20" y1="230" x2="100" y2="230"/>
				<!--头部-->
				<circle cx="140" cy="70" r="20" class="figure-part"/>
				<!--身体-->
				<line x1="140" y1="90" x2="140" y2="150" class="figure-part"/>
				<!--手臂-->
				<line x1="140" y1="120" x2="120" y2="100" class="figure-part"/>
				<line x1="140" y1="120" x2="160" y2="100" class="figure-part"/>
				<!--腿部-->
				<line x1="140" y1="150" x2="120" y2="180" class="figure-part"/>
				<line x1="140" y1="150" x2="160" y2="180" class="figure-part"/>
			</svg>
			
			<!--错误提示-->
			<div class="wrong-letters-container">
				<div class="wrong-letters">
					<p>错误：</p>
					<span>a</span>
				</div>
			</div>
			
			<!--单词输入内容-->
			<div class="word" id="word">
				<div class="letter">h</div>
				<div class="letter">e</div>
				<div class="letter">l</div>
				<div class="letter">l</div>
				<div class="letter">o</div>
			</div>
		</div>
		<!--游戏弹出框-->
		<div class="popup-contanier" id="popup-container">
			<div class="popup">
				<h2 class="final-message">输入正确</h2>
				<button id="play-button">再玩一次</button>
			</div>
		</div>
		
		<!--通知框-->
		<div class="notification-container" id="notification-container">
			<p>此字母已输入过，请重新输入</p>
		</div>
		<script src="index.js"></script>
	</body>
</html>
<!--
	SVG 与 Canvas 优缺点与共同点
	共同点：
	两者都是有效的图形工具，对于数据较小的情况下，都有很高的性能，
	它们都使用JavaScript 和 HTML，并且都遵守万维网（W3C）标准
	
	SVG优点：
	矢量图，不依赖于像素，无线放大后不会失真。
	以dom的形式表示，事件绑定由浏览器直接分发到节点上。
	SVG缺点：
	dom形式，涉及到动画的时候需要更新dom,性能较低。
	
	Canvas优点：
	定制性更强，可以绘制自己想要的东西。
	非dom结构形式，用JavaScript进行绘制，涉及到动画性能较高。
	Canvas缺点：
	事件分发由Canvas处理，绘制的内容的事件需要自己做处理。
	依赖于像素，无法高效保真，画布较大时候性能较低。

-->
